<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/swipeslider.css">
	<title>云名片</title>
	<style>
		.bg-white{  background-color:#fff }
		.app-header{background:-webkit-linear-gradient(#3e3d43,#242329);background:-o-linear-gradient(#3e3d43,#242329);background:-moz-linear-gradient(#3e3d43,#242329);background:linear-gradient(#3e3d43,#242329);color:#fff}
		.app-title{font-size:1.25em;min-height:1.1em;text-align:center;display:block;margin:0 30%;padding:.7em 0;text-overflow:ellipsis;font-weight:400;overflow:hidden;white-space:nowrap;outline:0!important}
		.app-content{position:relative;overflow:hidden;top:-1em;margin:0 1em;z-index:90;background-color:#fafafa;border-radius:5px;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc}
		.app-contentTop{background-color:#fff;padding:2em 1em;}
		.app-contentBottom{padding:1em 0;}
		.ui-left,.ui-right{float:left}
		.ui-left{width:30%}
		.ui-right{width:70%}
		.clear:after{content:".";display:block;height:0;clear:left;visibility:hidden}
		.userImg{border-radius:100%;overflow:hidden;width:6em;height:6em}
		.enterprise-logo{overflow:hidden;width:5em;height:5em;border:.3em solid #e7e7e7}
		.enterprise-logo img,.userImg img{width:100%;height:100%}
		.userInfo{margin-left:1em}
		.ui-right h1{font-size:1.5em;min-height:1.5em;font-weight:400;color:#343434}
		.ui-left p,.ui-right p,.userInfo p{min-height:1.8em;font-size:1.1em;color:#7d7d7d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
		.text-center{text-align:center}
		.bg-angle{width:4em;height:4em;background-image:url(img/bg-angle.png);background-size:100% 100%;display: block;margin: auto;}
		.bg-individual{width:4em;height:4em;background-image:url(img/bg-individual.png);background-size:100% 100%;display: block;margin: auto;}
		.m-b10{margin-bottom:10px}
		.p-t10{padding-top:10px}
		.p-b10{padding-bottom:10px}
		.p-b20{padding-bottom:20px}
		.p-tb20{padding-top:20px;padding-bottom:20px}
		.tab{background-color:#fff}
		.tab li{width:25%;float:left;text-align:center;padding:1em 0;color:#666;border-bottom:2px solid #fff}
		.tab li.active{border-bottom:2px solid #436fdc}
		.tab-content{background-color:#fff;padding:1em 2em;color:#525252}
		.tab-content li{display:none}
		.tab-content li.show{display:block}
		.tab-content li img{width:100%;}
		.icon{margin-right:5px;}
		.downloadBtn{background-color:#4e95e3;display:inline-block;width:80%;height:40px;line-height:40px;margin;0 auto;color:#fff;border-radius:20px;font-size:1.2em;}
		.left-arrow {position: absolute;width: 30px;height: 30px;top: 10px;left: 10px;}
		.left-arrow:before {content: "";position: absolute;width: 12px;height: 12px;border: 1px solid #fff;border-width: 1px 0 0 1px;transform: rotate(315deg);top: 8px;left: 7px;}
	</style>
</head>
<body>
<div class="page">
	<div class="app-header"><h1 class="app-title"></h1></div>
	<div class="swiper-container"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div></div>
	<div class="app-content"></div>
</div>
</body>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>
<script src="./js/swipeslider.min.js"></script>
<script type="text/javascript">
	host =   location.href;//包含端口
	var getUrlParam = function(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg);  //匹配目标参数
		if (r != null) return unescape(r[2]);
		return null;
	}
	var tabChange = function(i){
		$('.tab li').eq(i).addClass('active').siblings().removeClass('active');
		$('.tab-content li').eq(i).addClass('show').siblings().removeClass('show');
	}
	var getHtml = function(data,type,flag){
		var html = '';
		for(var i in data){
			if(type == 'banner'){
				if(flag ==1 && data[i].imgType == 5){
				html = html + '<div class="swiper-slide"><img src="' + data[i].pathUrl + '" width="100%"></div>'
			}
				if(flag ==2 && data[i].imgType == 1){
					html = html + '<div class="swiper-slide"><img src="' + data[i].pathUrl + '" width="100%"></div>'
				}
			}
			if(type == 'tab'){
				html = html + '<li onclick="tabChange('+ i +')">'+ data[i].name +'</li>'
			}
		}
		return html;
	}
	var tabData =  [{name:'企业文化'},{name:'营业执照'},{name:'资质证书'},{name:'荣誉证书'}];

	var getImg = function(data,type){
		if(data && data.length){
			if(type == 1){
				var o = 'img/bg-userImg-fe749544ec.png';
				for(var i in data){
					if(data[i].imgType == 6){
						var o = data[i].pathUrl;
					}
				}
				return o;
			}
			if(type ==2){
				var m = 'img/enterprise-logo-4b17222f68.png';
				for(var j in data){
					if(data[j].imgType == 7){
						var m = data[j].pathUrl;
					}
				}
				return m;
			}
		}
	}
	var getContent = function(data,type){
		var html = '';
		if(data && data.length){
			for(var i=data.length-1;i>=0;i--){
				if(type== data[i].imgType){
					html = html + '<img src="'+ data[i].pathUrl +'"/>';
				}
			}
		}
		return html;
	}
	var praseStrEmpty = function(str){
		if(!str || str=="undefined" || str=="null"){
		return "";
		}
		return str;
	}
	var appDownload = function(){
		var u = navigator.userAgent, app = navigator.appVersion;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.location.href="https://www.pgyer.com/gZTx";
		}
		if (isIOS) {
			window.location.href="https://testflight.apple.com/join/pv7gifLL";
		}
	}
	var jump = function(str){
		if(str){
			return '/business_card.html?uuid='+str;
		}else{
			return '#';
		}
	}

	$(function(){
		var id = getUrlParam('uuid');
		var getHotSellingImage = function(){
			$.get("appservice/business-card/findCard?uuid=" + id, function(result){
				var result = JSON.parse(result);
				if(result.data){
					var bannerData = result.data.imgList;
					if(result.data.userCard && result.data.userCard.cardType == 1){
						var title = "个人名片";
						var individualHtml = '<div class="app-contentTop"><div class="clear p-b10">'+
								'<div class="ui-left">'+
								'<div class="userImg">'+
								'<img src="' + getImg(result.data.imgList,1)+'"/>'+
								'</div>'+
								'</div>'+
								'<div class="ui-right">'+
								'<div class="userInfo">'+
								'<h1>'+ praseStrEmpty(result.data.userCard.userName) +'</h1>'+
								'<p>'+ praseStrEmpty(result.data.userCard.signature) +'</p>'+
								'</div>'+
								'</div>'+
								'</div>'+
								'<div class="clear">'+
								'<div class="ui-left text-center">'+
								'<div id="qrcode"></div>'+
								'<p>我的二维码</p>'+
								'</div>'+
								'<div class="ui-right">'+
								'<div class="userInfo">'+
								'<p><i class="icon iconfont icon-dianhua"></i>'+ praseStrEmpty(result.data.userCard.tel) +'</p>'+
								'<p><i class="icon iconfont icon-dianhuaphone349"></i>'+ praseStrEmpty(result.data.userCard.cardPhone) +'</p>'+
								'<p><i class="icon iconfont icon-weixin"></i>'+ praseStrEmpty(result.data.userCard.weChat) +'</p>'+
								'<p style="width:70%"><i class="icon iconfont icon-qq"></i>'+ praseStrEmpty(result.data.userCard.qq) +'</p>'+
								'<p style="width:70%"><i class="icon iconfont icon-youxiang"></i>'+ praseStrEmpty(result.data.userCard.email) +'</p>'+
								'</div>'+
								'</div>'+
								'</div>'+
								'</div><div class="app-contentBottom"><a class="bg-angle" href="'+ jump(result.data.uuid) +'"></a><p class="text-center"><a href="'+ jump(result.data.uuid) +'">企业名片>></a></p></div>';
						$('body').addClass('bg-white')
						$(".app-content").html(individualHtml);
						$('#qrcode').qrcode({
							render: "canvas", //也可以替换为table
							width: 80,
							height: 80,
							foreground: "#333",
							background: "#FFF",
							text: host
						});
						$(".swiper-wrapper").html(getHtml(bannerData,'banner',1));
						var swiper = new Swiper('.swiper-container', {
							pagination: '.swiper-pagination',
							paginationClickable: true,
							spaceBetween: 30,
						});
					}else if(result.data.userCard && result.data.userCard.cardType == 2){
						var title = "企业名片";
						var enterpriseHtml = '<div class="app-contentTop"><div class="clear p-b20">'+
								'<div class="ui-right p-t10">'+
								'<h1>'+ praseStrEmpty(result.data.userCard.corporateName) +'</h1>'+
								'</div>'+
								'<div class="ui-left">'+
								'<div class="enterprise-logo">'+
								'<img src="' + getImg(result.data.imgList,2)+'"/>'+
								'</div>'+
								'</div>'+
								'</div>'+
								'<div class="clear">'+
								'<div class="userInfo" style="margin-left: 0">'+
									'<p style="white-space: normal">地址：'+ praseStrEmpty(result.data.userCard.corporateAddress) + '</p>'+
									'<p style="white-space: normal">邮编：'+ praseStrEmpty(result.data.userCard.zipCode) +'</p>'+
									'<p style="white-space: normal">电话：'+ praseStrEmpty(result.data.userCard.tel) +'</p>'+
									'<p style="white-space: normal">邮箱：'+ praseStrEmpty(result.data.userCard.email) +'</p>'+
									'<p style="white-space: normal">官网：'+ praseStrEmpty(result.data.userCard.website) +'</p>'+
								'</div>'+
								'</div></div>';
						var tabHtml =  '<div class="tab clear m-b10"><ul>' +
								getHtml(tabData,"tab") +
								'</ul></div>'+
								'<div class="tab-content"><ul>'+
								'<li>'+ praseStrEmpty(result.data.userCard.corporateCulture) + getContent(result.data.imgList,8) +'</li>'+
								'<li>'+ getContent(result.data.imgList,2)  +'</li>'+
								'<li>'+ getContent(result.data.imgList,4)  +'</li>'+
								'<li>'+ getContent(result.data.imgList,3)  +'</li>'+
								'</ul></div><div class="app-contentBottom"><a class="bg-individual" href="'+ jump(result.data.uuid) +'"></a><p class="text-center"><a href="'+ jump(result.data.uuid) +'">个人名片>></a></p></div>'
						$(".app-content").html(enterpriseHtml);
						$(".page").append(tabHtml);
						tabChange(0);
						$(".swiper-wrapper").html(getHtml(bannerData,'banner',2));
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true,
							spaceBetween: 30,
			});
					}
					var backHtml = '<a class="left-arrow" href="javascript:history.go(-1)"></a>';
					if(history.length > 1){
					$(".app-header").append(backHtml);
					}
					var downloadHtml = '<div class="clear text-center p-tb20"><a class="downloadBtn" onclick="appDownload()">我也要制作名片</a></div>'
					$(".page").append(downloadHtml);
				}
				$(".app-title").text(title);
			});
		}
		getHotSellingImage()
	})
</script>
</html>